<!--
 * @Author: your name
 * @Date: 2021-06-26 09:17:50
 * @LastEditTime: 2021-07-05 11:23:38
 * @LastEditors: 宁乃楚
 * @Description: In User Settings Edit
 * @FilePath: \代码\day08\家政\briup-ui\src\pages\admin\order\Details.vue
-->
<template>
  <!-- 订单详情页 -->
  <div>
    <a class="el-link el-link--primary is-underline"><span @click="toOrder">返回</span></a>
    <br>
    <br>
    <el-table :data="orderData" style="width: 100%">
      <!-- 订单项编号 -->
      <el-table-column prop="id" label="订单项编号" />
      <!-- 产品编号 -->
      <el-table-column prop="productId" label="产品编号" />
      <!-- 产品 -->
      <el-table-column prop="product.name" label="产品">
        <template slot-scope="scope">
          <span style="color:#e65d6e;font-size:18px;margin-right:3px;">{{ scope.row.product.name }}</span>
        </template>
      </el-table-column>
      <!-- 产品图片 -->
      <el-table-column prop="product" label="产品图片">
        <!-- 作用域插槽 -->
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.product.photo"
            :preview-src-list="[scope.row.photo]"
          />
        </template>
      </el-table-column>
      <!-- 单价 -->
      <el-table-column prop="price" label="单价">
        <template slot-scope="scope">
          <span>￥</span>
          <span style="color:#e65d6e;font-size:18px;margin-right:3px;">{{ scope.row.price }}</span>
          <span>元</span>
        </template>
      </el-table-column>
      <!-- 数量 -->
      <el-table-column prop="number" label="数量" />
    </el-table>
    <div class="el-row" style="margin-left:-10px;padding-right:-10px;">
      <div v-if="allData" class="el-col el-col-6" style="padding-left:10px;padding-right:10px;">
        <div class="el-card box-card is-always-shadow">
          <div class="el-card__header">
            <div class="clearfix">
              <span>订单基本信息</span>
            </div>
          </div>
          <div class="el-card__body">
            <div class="text item">
              <p>订单编号：{{ allData.id }}</p>
              <p>订单金额：{{ allData.total+'元' }}</p>
              <p>下单时间：{{ allData.orderTime|dateFmt }}</p>
              <p>订单状态：{{ allData.status }}</p>
            </div>
          </div>
        </div>
      </div>
      <div v-if="employee" class="el-col el-col-6" style="padding-left:10px;padding-right:10px;">
        <div class="el-card box-card is-always-shadow">
          <div class="el-card__header">
            <div class="clearfix">
              <span>接单者信息</span>
            </div>
          </div>
          <div class="el-card__body">
            <div class="text item">
              <p>接单者：{{ employee.username }}</p>
              <p>接单者手机号：{{ employee.telephone }}</p>
            </div>
          </div>
        </div>
      </div>
      <div v-if="customer" class="el-col el-col-6" style="padding-left:10px;padding-right:10px;">
        <div class="el-card box-card is-always-shadow">
          <div class="el-card__header">
            <div class="clearfix">
              <span>下单者信息</span>
            </div>
          </div>
          <div class="el-card__body">
            <div class="text item">
              <p>下单者：{{ customer.username }}</p>
              <p>下单者手机号：{{ customer.telephone }}</p>
            </div>
          </div>
        </div>
      </div>
      <div v-if="address" class="el-col el-col-6" style="padding-left:10px;padding-right:10px;">
        <div class="el-card box-card is-always-shadow">
          <div class="el-card__header">
            <div class="clearfix">
              <span>雇主信息</span>
            </div>
          </div>
          <div class="el-card__body">
            <div class="text item">
              <p>雇主：{{ address.username }}</p>
              <p>雇主手机号：{{ address.telephone }}</p>
              <p>服务地址:{{ address.province+address.city+address.area+address.address }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from '@/utils/request'
import moment from 'moment'
export default {
  data() {
    return {
      // 订单数组 -表格数据源的数据
      orderData: [],

      // 订单详情第一层数据
      allData: [],

      // 订单详情产品层
      orderLines: [],

      // 接单者信息
      employee: '',

      // 下单者信息
      customer: '',

      // 雇主信息
      address: '',

      id: ''
    }
  },
  computed: {},
  created() {
    this.getOrdertDetails()
  },
  mounted() {},
  methods: {
    toOrder() {
      // 通过特定的方法  进行路由的切换
      // 通过一个$router.push进行跳转
      this.$router.push({
        // 对象属性参数
        path: 'List'
        // 通过name进行页面的切换
        // name:'MeInfo'
        // 获取到我的id
      })
    },
    // 获取所有订单
    async getOrdertDetails() {
      // 获取参数
      const data = {
        id: this.$route.query.detail
      }
      // 通过对应的参数发送网络请求，获取产品数据
      const res = await get('/order/findById', data)
      // 将data中的产品数组 进行赋值
      this.orderData = res.data.orderLines
      this.allData = res.data
      this.orderLines = res.data.orderLines[0]
      this.employee = res.data.employee
      this.customer = res.data.customer
      this.address = res.data.address
    },
    // 时间格式化
    formatDate: function(row, column) {
      var date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
      // return moment(date).format("YYYY-MM-DD");
    }
  }
}
</script>
<style scoped>
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card1 {
    width: 230px;
  }
  .box-card2 {
    width: 230px;
  }
  .box-card3 {
    width: 230px;
  }
</style>
